\documentclass[12pt]{article}

\usepackage[catalan]{babel}
\usepackage[utf8]{inputenc}
\usepackage{url}
\usepackage{hyperref}

\title{
  \Huge Simulador d'algoritmes de temps real\\
  \Large Universitat Jaume I - II75
}
\author{Autor: Lluís Santos}
\date{\scriptsize Versió del document: 1.0}

\begin{document}
  \maketitle
  \vspace{4cm}
  \tableofcontents
  \newpage
  \section{Introducció}
    \subsection{Descripció}
      Aquest programa es tracta d'un simulador d'algoritmes de planificació de
      temps real, com a entrada tenim la definició de les tasques que ha de dur
      a terme i com a sortida tenim un diagrama de temps de les tasque així com
      un resum dels temps emprats durant la simulació.

      Aquest programa està desenvolupat amb tecnologies web actuals (\textit{HTML5},
      \textit{CSS3} i \textit{JavaScript}).

    \subsection{Instal·lació}
      Per procedir amb la instal·lació només cal copiar els fitxers del
      projecte al directori on es vulga instalar, lo qual es pot fer mitjançant
      la següent linia:
      \verb"  $ git clone https://code.google.com/p/real-time-simulator/"\\
      per emprar el programa és necessari utilitzar un navegador modern
      (Chrome, Firefox, IE9+).
    \subsection{Mode d'ús}
      Per executar el programa cal obrir l'arxiu \verb"index.html" amb el
      navegador, en la pestanya \textbf{Tasks} s'introdueix la informació de les
      tasques en el format \verb"I=n1,D=n2,a=n3,b=n4,c=n5,d=n6", sent
      \verb"I=n1" l'instant en què s'inicia la tasca, \verb"D=n2" el temps
      \textit{Deadline} de la tasca i la resta els recursos que utilitza (poden
      ser locals o compartits, els compartits s'identifiquen perquè tenen el
      mateix nom en dues tasques), per afegir o eliminar tasques es poden
      utilitzar els botons \textit{Add} i \textit{Del}.

      Una vegada s'ha introduït la informació de les tasques, es procedeix a la
      simulació, per açò cal anar a la pestanya \textit{Simulation}, en la qual
      ens trobem un camp de selecció (select) per seleccionar l'algoritme de
      planificació a utilitzar (de moment només hi ha un algoritme de
      planificació implementat, però es poden implementar altres fàcilment
      heretant de la classe \verb"Algorithm") i una vegada tenim seleccionat
      l'algoritme, prenem el botó \textit{Simulate} per començar la simulació.

      El programa hauria de donar una sortida del següent tipus:
      \begin{itemize}
        \item A la part esquerra, una pantalla en la qual es mostra el diagrama
        de temps resultat de la simulació. Els colors del diagrama per als
        temps d'excecució són aleatoris (cada recurs és d'un color), per a quan
        les tasques estan suspeses, el color és \textit{cyan} i per a quan
        estan bloquejades, és \textit{negre}.
        \item A la part dreta, un resum dels temps emprats en la simulació,
        mostrant el numero total de tasques, el factor d'ús total, i un detall
        del temps de resposta i el RIP de cada tasca.
      \end{itemize}
    
  \section{Diagrama de fluxe}
    En aquesta secció s'explica com flueix la informació dins del programa, des
    de que l'usuari la introdueix fins a que es mostren els resultats de la
    simulació.

    \begin{enumerate}
      \item En primer lloc l'usuari inserta els paràmetres de les tasques en
      els \textit{input} de la pestanya \textit{Tasks}.
      \item Seguidament, prem el \textit{botó} de la pestanya
      \textit{Simulation}, lo qual excecuta el mètode simulate de l'objecte
      simulator agafant com a paràmetre el nom de l'algoritme planificador del
      select de l'usuari.
      \item En aquest punt, l'objecte \textit{simulator} utilitza l'objecte
      \textit{input} per tal d'arreplegar la informació de les tasques (en
      forma de text) dels inputs de l'usuari i la passa en forma de tasques
      (objectes de la classe \textit{Task}).
      \item L'objecte \textit{simulator} passa la informació de les tasques
      (objectes \textit{Task}) a l'algoritme planificador a utilitzar (objecte
      de la classe \textit{Algorithm}) i aquest es guarda una classe
      \textit{TaskState} que representa l'estat d'excecució d'una tasca en cada
      instant.
      \item L'objecte simulator va demanant la informació de les tasques
      (\textit{TaskState}s) a l'algoritme planificador en cada instant i li ho
      passa correctament a l'objecte \textit{output}, que aquest ho mostra per
      pantalla.
    \end{enumerate}
    
  \section{Descripció d'alt nivell}
    En el programa simulador hi ha les següents classes i objectes.
    \begin{itemize}
      \item Objecte \textit{html}, és una instància de la classe \textit{Html},
      es troba en el fitxer \verb"Html.js" i s'encarrega de proveïr certes
      parts de codi html als objectes de presentació (\textit{behaviour} i
      \textit{output}).
      \item Objecte \textit{utils}, de la classe \textit{Utils}, es troba en el
      fitxer \verb"Utils.js" i proveix certes utilitats com funcions de màxim.
      \item Objecte \textit{beahaviour}, de la classe \textit{Behaviour}, es
      troba en el fitxer \verb"Behaviour.js" i s'encarrega de gestionar el
      comportament del programa en quant a la navegació de l'usuari entre
      pantalles i la inserció de dades per a les tasques.
      \item Objecte \textit{simulator}, de la classe \textit{Simulator}, es
      troba en el fitxer \verb"Simulator.js" i és el que s'encarrega
      d'excecutar la simulació, aquest té un bucle i va cridant a l'objecte
      \textit{scheduler} (planificador) per a que li done el nou estat de les
      tasques en el seguent instant; seguidament aquest excecuta els metodes de
      l'objecte \textit{output} per tal de que es mostre la informació per
      pantalla.
      \item Objectes \textit{scheduler}, hereda de la classe
      \textit{Algorithm}, es troba en el fitxer \verb"Algorithms.js" i és
      l'encarregat de decidir què es fa amb les tasques després de cada
      instant. Es poden afegir nous algoritmes de planificació heredant de la
      classe \textit{Algorithm} i sobreescrivint el mètode \textit{decide}.
      \item Objecte \textit{input}, de la classe \textit{Input}, es troba en el
      fitxer \verb"Input.js" i s'encarrega d'arreplegar les dades que l'usuari
      ha insertat en els \textit{inputs} de la pestanya \textit{Tasks},
      parsejar-los i tornar-los en forma de tasques (\textit{new Task}).
      \item Objecte \textit{output}, de la classe \textit{Output}, es troba en
      el fitxer \verb"Output.js" i s'encarrega de mostrar els resultats de la
      planificació per pantalla.
      \item Objectes \textit{task}, de la classe \textit{Task}, es troba en el
      fitxer \verb"Task.js" i representen una tasca en el sistema.
      \item Objecte \textit{taskstate}, de la classe \textit{TaskState}, es
      troba en el fitxer \verb"Task.js" i representen l'estat d'una tasca en el
      sistema.
    \end{itemize}
    
  \section{Descripció del codi font}
    El codi font es troba en les subcarpetes de \verb"src/", el \textit{css} en
    la carpeta \verb"src/css/", el \textit{JavaScript} en la carpeta
    \verb"src/js/" i el codi \LaTeX{} per fer aquesta memòria, en la carpeta
    \verb"src/tex/".
    
    El fitxer \verb"index.html" es troba en la carpeta arrel del projecte, i és
    l'encarregat de carrregar la resta del codi (JavaScript i css) del
    projecte, així com els frameworks utilitzats (\textit{Twitter Bootstrap},
    per a la maquetació de la web i \textit{jQuery}, per a ajudar en la
    interacció amb el \textit{DOM} de la pàgina.
    
  \section{Conclusions}
    Amb l'elaboració d'aquest simulador he pogut posar en pràctica moltes
    coses, com planificar un projecte de mitjana envergadura, pràcica també amb
    noves tecnologies del web, com html5, css3 i JavaScript, i sobretot molta
    pràctica en pensar totes les variables que s'han de tenir en compte a
    l'hora de fer un planificador que tinga temps pel mig.
    
  \addcontentsline{toc}{section}{Referències}
  \begin{thebibliography}{}
    \bibitem -Web de l'assignatura II75 - \url{http://www.vision.uji.es/~pla/ii75/}
    \bibitem -jQuery documentation - \url{http://docs.jquery.com}
    \bibitem -Twitter Bootstrap - \url{http://twitter.github.com/bootstrap/}
  \end{thebibliography}
\end{document}
